/** 截取图片* */

//上传图片预览
function previewSingleChange(file,w,h,getImgPath) {
    appendSingleDiv(getImgPath);
    // 点击上传的时候清空原来的图片
    var type = file.files[0].type.split('/')[0];
    if (file.files && file.files[0] && type == 'image') {
        var reader = new FileReader();
        reader.onload = function (evt) {
            $("#preview").append('<img id="target" src="' + evt.target.result + '" style="width: 400px;display: block" />');
            // setTimeout('init()', 500);
            $("#preview-pane").show();
            $("#preview-pane").find("#preview_div1").empty();
            $("#preview-pane").find("#preview_div1").append('<input type="hidden" class="imgCord" name="imgCord" /><img class="jcrop-preview" alt="Preview"  src="' + $("#target").attr("src") + '" />');
            setTimeout(function () {
                init(w,h);
            }, 500);
        };
        reader.readAsDataURL(file.files[0]);
        $("#cutImage").modal('show');
    }else {
        alert('请上传图片');
        return false;
        // $("#preview").innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
}

// 添加预览弹框
function appendSingleDiv(getImgPath) {
    $("body").find("#cutImage").remove();
    var appdiv = $('<div class="modal fade" id="cutImage" tabindex="-1" role="dialog" aria-labelledby="cutImageModalModalLabel">' +
        '<div class="modal-dialog modal-sm4" role="document">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<button type="button" class="close" aria-label="Close" onclick="closeCutImage()">' +
        '<span aria-hidden="true">&times;' +
        '</span>' +
        '</button>' +
        '<h4 class="modal-title" id="cutImageModalModalLabel">图片</h4>' +
        '</div><div id="modalEdit" class="modal-body" >' +
        '<div id="preview"></div>' +
        '<div class="preview-pane">' +
        '<div id="preview-pane" class="preview-single-content preview-single">' +
        '<div id="preview_div1" class="preview-container">' +
        '</div></div></div></div>' +
        '<div class="modal-footer">' +
        // '<a class="btn btn-primary" onclick="imgSingle_Sure()"><i class="fa fa-save"></i> 保存</a>' +
        '<a class="btn btn-primary" ><i class="fa fa-save"></i> 保存</a>' +
        '<a class="btn btn-cancel" onclick="closeCutImage()"><i class="fa fa-remove"></i> 取消</a></div></div></div></div>');

    appdiv.find(".btn-primary").click(function () {
        imgSingle_Sure(getImgPath);
    });
    $("body").append(appdiv);

}

// 初始化图片
function init(w,h) {
    if (jcrop_api != undefined) {
        jcrop_api.destroy();
    }
    //计算预览图片比例
    var high = (200 /w)*h+'px';
    $(" .preview-container").css({
        width : '200px',
        height :high,
        overflow: 'hidden'
    });
    boundx =   $("#target").width();
    boundy =   $("#target").height();
    $("#target").Jcrop({
        bgFade: true,
        aspectRatio: w / h,
        // minSize: [100, 100],
        setSelect: [1, 1, 200, 200],
        onChange: updatePreview,
        onSelect: updatePreview
    }, function () {
        // $("#a").val($("#target").width());
        // $("#b").val($("#target").height());
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        jcrop_api = this;

        $('#preview-pane').append(jcrop_api);
    });
}

var jcrop_api,
    boundx,
    boundy,
    $pimg = $('#preview-pane').find('.preview-container').find('img');
function updatePreview(c) {
    $pimg = $('#preview-pane').find('.preview-container').find('img');
    if (parseInt(c.w) > 0) {
        var rx = $('#preview-pane').find('.preview-container').width() / c.w;
        var ry = $('#preview-pane').find('.preview-container').height() / c.h;

        $pimg.css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
        // 获取记录位置和高宽
        var per = {};
        per['x'] = c.x;
        per['y'] = c.y;
        per['w'] = c.w;
        per['h'] = c.h;
        per['size_w'] = $("#target").width();
        per['size_h'] = $("#target").height();
        var jsonDAta = JSON.stringify(per);
        $(".imgCord").val(jsonDAta);

    }
}
function des() {
    $("#preview-pane").hide();
    jcrop_api.destroy();
}

function imgSingle_Sure(getImgPath) {
    // debugger;
    // $("#imgSingle_Sure").find('div').remove();
    // // 克隆截图预览图片
    // var imgList = $("#preview-pane").clone().removeAttr('id').removeClass('preview-single-content');
    //
    // $("#imgSingle_Sure").append(imgList);
    // $(".preview-pane #preview-pane #preview_div1").empty();
    // closeCutImage();
    getImgPath();
}
function closeCutImage() {
    $("#cutImage").modal('hide');
    $("body").find('cutImage').remove();

}


function uploadCutImage() {

}